<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">sku</h4>
</div>
<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 500px;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>
<form id="detail-form" action="/xqc/overseas-in/os-dropshipping-ajax" method="post">
    <div class="modal-body">
        <div class="row">
            <div class='form-inline margin'>
                <div id="dvThead" style="padding-right:17px">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 15%">箱号</th>
                                <th style="width: 15%">箱数</th>
                                <th style="width: 30%">FNSKU</th>
                                <th style="width: 15%">单箱数量</th>
                                <th style="width: 25%">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div id="dvTbody">
                    <table class="table table-hover" id="table-detail">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-sm btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        {{ csrf_field() }}
        <input type="hidden" name="param[id]" value="{{ $id }}">
        <input type="hidden" name="action" value="doAddBoxDetail">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>
<template id="table-detail-tpl">
    <tr>
        <td style="width:15%"><input type="text" class="form-control integer_num_" placeholder="箱号" name="param[__index__][box_no]" required></td>
        <td style="width:15%"><input type="text" class="form-control integer_num_" placeholder="箱数" name="param[__index__][total]" value="1" required></td>
        <td style="width:30%"><input type="text" class="form-control" placeholder="FNSKU" name="param[__index__][fnsku]" required></td>
        <td style="width:15%"><input type="text" class="form-control integer_num_"  placeholder="单箱数量" name="param[__index__][num_per_box]" required></td>
        <td style="width:25%"><a class="btn btn-sm btn-danger table-detail-remove"><i class="fa fa-trash"></i> 移除</a></td>
    </tr>
</template>
<script language="JavaScript" type="text/javascript">
    $(function () {
        $('#add-table-detail').click(function (event) {
            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $(".integer_num_").inputmask("integer",{
                onKeyValidation: function () {
                    if($(this).val() <= 0 || isNaN($(this).val())){
                        $(this).val('');
                    }
                }
            });
        });
        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });
        $("#detail-form").ajaxForm(function (data) {
            if (typeof data === 'object') {
                if (data.status) {
                    $("#myModal").modal('hide');
                    $(".modal-backdrop").remove();
                    $('body').removeClass('modal-open');
                    toastr.success('提交成功 !');
                    $.pjax.reload('#os-box-form');
                } else {
                    swal(data.message, '', 'error');
                }
            }
        });
    });
</script>
